<template>
  <div class="block text-center carousel" m="t-4">
    <el-carousel trigger="click" height="160px">
      <el-carousel-item v-for="(item, index) in banner" :key="index">
        <h3 class="small justify-center" text="2xl"><img :src="item.img" width="710" height="160"></h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "carousl",
  setup() {
    const banner = ref([
      {
        img: "https://img1.baidu.com/it/u=2059868850,2012944086&fm=253&fmt=auto&app=138&f=JPG?w=1280&h=394",
      },
      {
        img: "https://img0.baidu.com/it/u=3019172731,3542886989&fm=253&fmt=auto&app=138&f=JPG?w=1616&h=500",
      },
      {
        img: "https://img0.baidu.com/it/u=1007771471,1699590680&fm=253&fmt=auto&app=138&f=JPEG?w=1600&h=500",
      },
      {
        img: "https://img0.baidu.com/it/u=1437206875,1913888274&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=156",
      },
      {
        img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01046d594a1e28a8012193a30a7086.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660176272&t=0dee35b15073c17fadd85a5ac034ba8e",
      },
    ]);
    return { banner };
  },
};
</script>

<style lang="scss" secoped>
.demonstration {
  color: var(--el-text-color-secondary);
}
.el-carousel {
  border-radius: 7px ;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
img{
  border-radius: 7px ;
}
</style>